<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <Pagination ref="pagination" :queryPage="loadAppPage">
        <div slot="search">
          <el-form :inline="true" :model="queryForm" size="mini"
          >
            <el-form-item label="应用名称">
              <el-input v-model="queryForm.appName" placeholder="应用名称"/>
            </el-form-item>
            <el-form-item label="展示名称">
              <el-input v-model="queryForm.appShowName" placeholder="展示名称"/>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="$refs.pagination.go(1);">查询</el-button>
              <el-button type="success" @click="$refs.appSettingDialog.open()"
              >新增
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table slot="table" :data="pageData" border size="mini" style="width: 100%">
          <el-table-column label="#ID" prop="id" width="80"/>
          <el-table-column label="应用名称" prop="appName" width="150"/>
          <el-table-column label="应用展示名称" prop="appShowName" show-overflow-tooltip/>
          <el-table-column label="构建类型" prop="buildType.name" width="120"/>
          <el-table-column label="部署类型" prop="deployType.name" width="120"/>
          <el-table-column label="监控类型" prop="monitorType.name" width="120"/>
          <el-table-column label="日志类型" prop="logType.name" width="120"/>
          <el-table-column label="更新时间" prop="updated" width="150"/>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="$refs.appSettingDialog.open(scope.row.appName)">编辑</el-button>
              <el-button size="small" type="text" @click="$refs.deployGroupDialog.open(scope.row)">分组</el-button>
              <el-button size="small" type="text" @click="onDeleteApp(scope.row.appName)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </Pagination>
    </el-card>
    <AppSettingDialog ref="appSettingDialog" @saveSuccess="$refs.pagination.go(1);"/>
    <DeployGroupDialog ref="deployGroupDialog"/>
  </div>
</template>
<script>
import {appPageApi, deleteAppApi} from "@/api/manage";
import Pagination from "@/components/Pagination";
import AppSettingDialog from "./components/AppSettingDialog";
import DeployGroupDialog from "@/view/manage/appList/components/DeployGroupDialog";

export default {
  data() {
    return {
      queryForm: {},
      pageData: [],
      appSetting: {},
      appSettingVisible: false,
    };
  },
  components: {Pagination, AppSettingDialog, DeployGroupDialog},
  methods: {
    async loadAppPage(current, size) {
      let query = Object.assign({current: current, size: size,}, this.queryForm);
      let data = await appPageApi(query);
      this.pageData = data.records;
      return data;
    },
    onDeleteApp(appName) {
      this.$confirm("此操作将永久删除该应用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            deleteAppApi(appName).then(() => {
              this.$message({type: "success", message: "删除成功!"});
              this.$refs.pagination.go(1);
            });
          })
          .catch(() => {
            this.$message({type: "info", message: "已取消删除",});
          });
    },
  },
};
</script>